<template>
  <div class="content">
    <nav-com title="友聊私域流量助手" :showView="showView" @back="backHandler()"></nav-com>
    <div class="goods-info">
      <div class="title title-line">发送内容</div>
      <div class="item">
        <div class="label">*选择商品</div>
        <div class="scroll_x">
          <div class="shop_item" v-for="(item,index) in categoryList" :key="index">
            <img class="ischoose" src="@/assets/friendShare/select.png" v-if="item.is_sel" @click.stop="chooseShop(item,index)"/>
            <img class="ischoose"  src="@/assets/friendShare/noselect.png" v-else @click.stop="chooseShop(item,index)"/>
            <img  class="shopimg" :src="item.image" alt="">
            <div class="titleshop">{{item.title}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="goods-info">
      <div class="title">发送群体</div>
      <div class="item goods-info-item">
        <div class="label">*性别</div>
        <div class="input-content">
          <van-field v-model="fromshop.sex" placeholder="选择性别" class="input" readonly @click="showPicker = true">
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-field>
        </div>
      </div>
      <div class="item goods-info-item">
        <div class="label">*地区</div>
        <div class="input-content">
          <van-field v-model="fromshop.address" placeholder="选择地区" class="input" readonly @click="showPicker1 = true">
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-field>
        </div>
      </div>
      <div class="item goods-info-item">
        <div class="label">*年龄</div>
        <div class="input-content">
          <van-field v-model="fromshop.age1" placeholder="选择年龄" class="input" readonly @click="showPicker2 = true">
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-field>
          <div class="end">至</div>
          <van-field v-model="fromshop.age2" placeholder="选择年龄" class="input" readonly @click="showPicker3 = true">
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-field>
        </div>
      </div>
      <div class="item goods-info-item">
        <div class="label">*级别</div>
        <div class="input-content">
          <van-field v-model="fromshop.level" placeholder="选择级别" class="input" readonly @click="showPicker4 = true">
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-field>
        </div>
      </div>
    </div>
    <div class="goods-info">
      <div class="title">发送人群</div>
      <div class="tips">
        <div class="sendpeopleList" v-for="(item,index) in userInfo.pay" :key="index" :class="activeIndex == index?'active':''" @click="payMethod(index,item)">
          <div class="senPeople_item">
            <div>
              {{item.pay_money+'元'}}
            </div>
            <div>
              {{item.send_num+'人'}}
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <van-button class="btn" @click="submitGoods">确认</van-button>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
          show-toolbar
          :columns="xingbieList"
          @cancel="showPicker = false"
          @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model="showPicker1" round position="bottom">
      <van-picker
          show-toolbar
          :columns="areaList"
          @cancel="showPicker1 = false"
          @confirm="onConfirm1"
      />
    </van-popup>
    <van-popup v-model="showPicker2" round position="bottom">
      <van-picker
          show-toolbar
          :columns="ageList"
          @cancel="showPicker2 = false"
          @confirm="onConfirm2"
          value-key="name"
      />
    </van-popup>
    <van-popup v-model="showPicker3" round position="bottom">
      <van-picker
          show-toolbar
          :columns="ageList"
          @cancel="showPicker3 = false"
          @confirm="onConfirm3"
      />
    </van-popup>

    <van-popup v-model="showPicker4" round position="bottom">
      <van-picker
          show-toolbar
          :columns="userInfo.level"
          @cancel="showPicker4 = false"
          @confirm="onConfirm4"
          value-key="name"
      />
    </van-popup>
  </div>
</template>

<script>
import { getCategoryByShopId,SupplierAdd,SupplierEdit,postImages5G,userInfo5G,renqun,sendGoods } from "@/api/api";
import { Dialog } from 'vant';
import navCom from "@/component/nav";
import {option} from '@/api/area.js'
export default {
  components: {
    navCom,
  },
  data(){
    return {
      id:'',
      category:'',
      categoryId:'',
      title:'',
      price:'',
      share:'',
      stock: '',
      content: '',
      goodsImg: [],
      image:'',
      swiperImgs:[],
      images:[],
      categoryList:[],
      showPicker:false,
      showPicker1:false,
      showPicker2:false,
      showPicker3:false,
      showPicker4:false,
      showView: true,
      userInfo:{},
      activeIndex:0,

      xingbieList:[
        { text: '男', value: '男' },
        { text: '女', value: '女' }
      ],
      areaList:[],
      ageList:[],
      fromshop:{}
    }
  },
  mounted(){
    if(this.$route.query.goodsId){
      this.id = this.$route.query.goodsId
    }
    for(var i = 0;i<100;i++){
      this.ageList.push(i)
    }
    let arealist = option;
    arealist.forEach((item)=>{
      let obj = {
        value:item.text,
        text:item.text
      }
      this.areaList.push(obj)
    })
    this.init()
  },
  methods:{
    payMethod(index,item){
      this.activeIndex = index;
      this.fromshop.send_num = item.send_num;
      this.fromshop.pay_money = item.pay_money;
    },
    chooseShop(item,index){
      this.categoryList.forEach((items,indexs)=>{
        items.is_sel = false
      })
      item.is_sel = !item.is_sel
      this.$set(this.categoryList,index,item)
    },
    init(){
      renqun({token:localStorage.getItem("token5g")}).then(res=>{
        this.userInfo = res.data.data;
        this.fromshop.send_num = this.userInfo.pay[0].send_num;
        this.fromshop.pay_money = this.userInfo.pay[0].pay_money;
      })
      this.shopcategory()
    },
    shopcategory(){
      sendGoods({token:localStorage.getItem("token5g")}).then(res=>{
        let categoryList = []
        res.data.data.forEach((item)=>{
          item.is_sel = false
          categoryList.push(item)
        })
        this.categoryList = categoryList
      })
    },
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    onConfirm(item){
      this.fromshop.sex = item.value
      this.showPicker = false
    },
    onConfirm1(item){
      this.fromshop.address = item.value
      this.showPicker1 = false
    },
    onConfirm2(item){
      this.fromshop.age1 = item
      this.showPicker2 = false
    },
    onConfirm3(item){
      this.fromshop.age2 = item
      this.showPicker3 = false
    },

    onConfirm4(item){
      this.fromshop.level = item
      this.showPicker4 = false
    },
    async goodsImgAfterRead (file) {
      this.image = await this.uploadImg(file.file)
    },
    submitGoods(){
      let chooselist = [];
      this.categoryList.forEach((item)=>{
        if(item.is_sel){
          chooselist.push(item.id)
        }
      })
      if(chooselist.length>0){
        this.fromshop.goods_ids = chooselist.join(',')
      }else{
        Dialog.alert({
          title: "请选择商品",
          confirmButtonText:'我知道了'
        }).then(() => {
        });
        return
      }
      // if(!this.fromshop.sex){
      //   Dialog.alert({
      //     title: "请选择性别",
      //     confirmButtonText:'我知道了'
      //   }).then(() => {
      //   });
      //   return
      // }
      if(!this.fromshop.address){
        Dialog.alert({
          title: "请选择地区",
          confirmButtonText:'我知道了'
        }).then(() => {
        });
        return
      }
      // if(!this.fromshop.age1){
      //   Dialog.alert({
      //     title: "请选择年龄",
      //     confirmButtonText:'我知道了'
      //   }).then(() => {
      //   });
      //   return
      // }
      // if(!this.fromshop.age2){
      //   Dialog.alert({
      //     title: "请选择年龄",
      //     confirmButtonText:'我知道了'
      //   }).then(() => {
      //   });
      //   return
      // }
      if(!this.fromshop.level){
        Dialog.alert({
          title: "请选择级别",
          confirmButtonText:'我知道了'
        }).then(() => {
        });
        return
      }
      let params = {
        ...this.fromshop,
        token:localStorage.getItem("token5g")
      }
      this.$router.push({
        name: "yingxiaoDetailfu",
        params: {
          fromshop: JSON.stringify(params)
        },
      });

    }
  }
}
</script>

<style scoped>
/deep/.van-uploader__upload{
  order:-1;
}
div {
  box-sizing: border-box;
}
.content {
  background-color: #F8F8F8;
  padding-bottom: 80px;
}
.back {
  height: 22px;
}

.goods-info {
  margin-top: 10px;
  background-color: #fff;
  padding: 10px 20px 20px;
}
.goods-info .title {
  line-height: 50px;
  font-size: 18px;
  font-weight: 700;
}
.goods-info .title-line {
  border-bottom: 1px solid #eee;
}
.goods-info .item .scroll_x {
  width: 92vw;
  overflow-x: scroll;
  display: flex;
  flex-wrap: nowrap;

}
.shop_item{
  position: relative;
  margin-right: 10px;
}
.goods-info .item .scroll_x .ischoose{
  position: absolute;
  top: 0px;
  right:5px;
  width: 20px;
}
.goods-info .item .scroll_x .shopimg{
  width: 45vw;
  height: 45vw;
}
.goods-info .item .scroll_x .titleshop{
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 21px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.goods-info-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item .label {
  line-height: 40px;
  margin-top: 5px;
  color: #949494;
}
.input-content {
  display: flex;
  align-items: center;
}
.input {
  border-radius: 5px;
}
.end {
  width: 25px;
  height: 100%;
  text-align: center;
  font-size: 14px;
}

.tips {
  color: #949494;
  font-size: 12px;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.sendpeopleList{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 48%;
  padding: 3vw;
  background: #F5F5F5;
  border-radius: 4px;
  border: 1px solid #D1D2D5;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 20px;
}
.sendpeopleList.active{
  background: rgba(239,65,52,0.1);
  border-radius: 4px;
  border: 1px solid #EF4134;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #EF4134;
  line-height: 20px;
}
.senPeople_item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload {
  margin-top: 10px;
}


.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 70px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  padding: 10px;
}
.bottom .btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  color: #fff;
  background-color: #FF3F4F;
  /* background-image: linear-gradient( to right , #FF3F4F , #FF3F4F); */
  font-size: 18px;
}
/deep/.van-field__control{
  width: 56px;
  display: flex;
  justify-content: center;
  text-align: center!important;
}
/deep/.van-cell{
  padding: 10px 4px;
}
</style>
